<template>
	<view class="content">
		<view class="" :class="show ? 'fade-in' : 'fade-out'">
			<block v-for="(item,index) in list" :key="index">
				<topic-list :item="item" :isIndex="index" :isPlay="activeIndex == index" @audioPlay="audioPlay"
					:type="1" @del="del"></topic-list>
			</block>
			<w-load-more ref="wLoadMore"></w-load-more>
		</view>
	</view>
</template>

<script>
	const audioContext = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				page: 1,
				list: '',
				show: false,
				activeIndex: -1
			}
		},
		onLoad() {
			this.getList(1)
			audioContext.onEnded(res => {
				console.log('结束了')
				this.activeIndex = -1
			})
		},
		onReachBottom() {
			this.page++
			this.$refs['wLoadMore'].setLoading()
			this.getList()
		},
		methods: {
			// 播放音频事件监听
			audioPlay(index) {
				if (this.activeIndex == index) {
					this.activeIndex = -1
					audioContext.pause()
				} else {
					this.activeIndex = index
					audioContext.src = this.list[index].voc
					audioContext.play()
				}

			},
			async getList(loading) {
				try {
					let result = await this.$request({
						loading,
						url: '/api/user/myGoodsList',
						method: 'post',
						data: {
							page: this.page
						}
					})
					let data = result.data.data.data
					if (this.page == 1) {
						this.list = result.data.data.data
						this.show = true
					} else {
						this.list = this.list.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if (data.length == 0) {
							this.page--
						}
					}
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			async del(id) {
				try {
					let result = await this.$request({
						loading: 1,
						url: '/api/user/edieGoods',
						method: 'post',
						data: {
							type: 1,
							id
						}
					})
					this.msg(result.data.msg)
					this.page = 1
					this.getList()
				} catch (e) {
					console.log(e)
					this.msg(e.data.msg)
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 32rpx 30rpx 0 30rpx;
	}
</style>
